<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>大屏数据可视化 - 模板</title>
		<link rel="stylesheet" type="text/css" href="../../static/tpl03/css/app.css" />
	</head>
	
	<body id="lin_list_1">

		<header id="header">
			<h3 class="header-title">全国疫情实时分析</h3>
		</header>
		
		<div id="container">
			<div id="flexCon">
				<div class="flex-row">
					<div class="flex-cell flex-cell-l">
						<div class="chart-wrapper">
							<h3 class="chart-title">图表</h3>
							<div class="chart-div">
								<div class="chart-loader"><div class="loader"></div></div>
							</div>
						</div>
					</div>
					<div class="flex-cell flex-cell-c">
						<div class="chart-wrapper">
							<h3 class="chart-title"></h3>
							<div class="chart-div"></div>
						</div>
					</div>
					<div class="flex-cell flex-cell-r">
						<div class="chart-wrapper">
							<h3 class="chart-title"></h3>
							<div class="chart-div chart-done">
								<div class="chart-loader"><div class="loader"></div></div>
							</div>
						</div>
					</div>
				</div>
				<div class="flex-row">
					<div class="flex-cell flex-cell-lc">
						<div class="chart-wrapper">
							<h3 class="chart-title"></h3>
							<div class="chart-div chart-done">
								<div class="chart-loader"><div class="loader"></div></div>
							</div>
						</div>
					</div>
					<div class="flex-cell flex-cell-r">
						<div class="chart-wrapper">
							<h3 class="chart-title"></h3>
							<div class="chart-div chart-done">
								<div class="chart-loader"><div class="loader"></div></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
<script type="text/javascript">
        window.onload = function(){
            //屏蔽键盘事件
            document.onkeydown = function (){
                var e = window.event || arguments[0];
                //F12
                if(e.keyCode == 123){
                    return false;
                //Ctrl+Shift+I
                }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
                    return false;
                //Shift+F10
                }else if((e.shiftKey) && (e.keyCode == 121)){
                    return false;
                //Ctrl+U
                }else if((e.ctrlKey) && (e.keyCode == 85)){
                    return false;
                }
            };
            //屏蔽鼠标右键
            document.oncontextmenu = function (){
                return false;
            }
        }

    </script>
     <script type="text/javascript">
        const width = document.documentElement.clientWidth;
        const height = document.documentElement.clientHeight;
        var screen_width = width;
        if (width < height) {
            screen_width = height;
            const contentDOM = document.getElementById('lin_list_1');
            contentDOM.style.width = height + 'px';
            contentDOM.style.height = width + 'px';
            contentDOM.style.top = (height - width) / 2 + 'px';
            contentDOM.style.left = 0 - (height - width) / 2 + 'px';
            contentDOM.style.transform = 'rotate(90deg)';
        }
        const evt = "onorientationchange" in window ? "orientationchange" : "resize";
        window.addEventListener(evt, function () {
        if (window.orientation === 90 || window.orientation === -90) {
        screen_width = height;
        contentDOM.style.width = height + 'px';
        contentDOM.style.height = width + 'px';
        contentDOM.style.top = '0px';
        contentDOM.style.left = '0px';
        contentDOM.style.transform = 'none';
        }else{
        screen_width = height;
        contentDOM.style.width = height + 'px';
        contentDOM.style.height = width + 'px';
        contentDOM.style.top = (height - width) / 2 + 'px';
        contentDOM.style.left = 0 - (height - width) / 2 + 'px';
        contentDOM.style.transform = 'rotate(90deg)';}
        }, false)

    {#$(document).ready(function () {#}
    {#    $("#full").css("width",(width-3).toString()+"px")#}
    {#    $("#full").css("height",(height-3).toString()+"px")#}
    //})
</script>
</html>